<template>
  <div class="right">
    <div class="flex-warp box">
      <div class="item flex tac" v-for="item in list" :key="item.name">
        <div class="content">
          <div class="num">
            <span>{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="label">设备信息</div>
    <div class="flex-warp device-list">
      <div v-for="(item, index) in deviceList" :key="index">
        <div class="device-item tac">{{ item.value || '--' }}</div>
        <div class="tac device-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '平台设备总数', num: 47, unit: '台' },
        { name: '当前在线设备数', num: 2, unit: '台' },
        { name: '当前报警设备数', num: 0, unit: '台' },
        { name: '当前离线设备数', num: 45, unit: '台' }
      ],
      deviceList: [
        { name: '设备状态', value: '在线' },
        { name: '运行模式', value: '' },
        { name: '杀虫仓温度', value: '' },
        { name: '烘干仓温度', value: '' },
        { name: '降雨状态', value: '' },
        { name: '光照度', value: '' },
        { name: '诱虫灯', value: '' },
        { name: '虫雨挡板', value: '' },
        { name: '杀虫挡板', value: '' },
        { name: '烘干挡板', value: '' },
        { name: '移虫装置', value: '' },
        { name: '震动装置', value: '' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  margin-left: 0.125rem;
  margin-top: 0.0875rem;
  width: 6.875rem;
  // width: 7.5rem;
  .box {
    gap: 0.2rem;
    .item {
      width: 3.25rem;
      height: 2.625rem;
      background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2024/1/8/ksh2_44f7be302d4d4800bb6a2829fe8a9780.png');
      background-size: 100% 100%;
      .content {
        margin-top: 0.3125rem;
        .num {
          color: #ffe347;
          font-size: 0.3rem;
          .unit {
            font-size: 0.25rem;
          }
        }
        .name {
          margin-top: 0.125rem;
          font-size: 0.25rem;
        }
      }
    }
  }
  .label {
    width: 6.625rem;
    height: 0.475rem;
    line-height: 0.475rem;
    background: linear-gradient(180deg, rgba(0, 205, 255, 0.04), rgba(0, 205, 255, 0.1));
    margin: 0.25rem 0;
    font-size: 0.25rem;
  }
  .device-list {
    width: 6.75rem;
    padding: 0.125rem;
    height: calc(100vh - 7.95rem);
    overflow: auto;
    gap: 0.4375rem;
    .device-item {
      height: 1.25rem;
      width: 1.25rem;
      border-radius: 50%;
      box-shadow: inset 0 0 0.125rem #1d5acc;
      color: #0ff;
      font-size: 0.25rem;
      line-height: 1.25rem;
      margin-bottom: 0.125rem;
    }
    .device-name {
      font-size: 0.2rem;
      margin-bottom: 0.25rem;
    }
  }
}
</style>
